<template>
  <div>
    <!-- 头部导航 -->
    <van-nav-bar title="个人信息编辑" left-arrow>
      <template #right>
        <van-icon @click="$router.push('/index')" name="wap-home-o" size="20" />
      </template>
    </van-nav-bar>
    <!-- 内容 -->
    <!-- 头像 -->
    <div class="head_img">
        <!-- <img src="http://img1.imgtn.bdimg.com/it/u=3757784226,1202878475&fm=26&gp=0.jpg" alt=""> -->
        <img :src="userInfo.head_img | joinPath" alt="">
        <van-uploader :after-read="after_head_img" />
    </div>
    <!-- 昵称 -->
    <van-cell title="昵称" is-link @click="showNicknameFn" :value="userInfo.nickname" />
    <van-dialog @confirm="changeNicknameFn" :before-close="nicknameBeforCloseFn" v-model="showNickname" title="编辑昵称" show-cancel-button>
          <van-field
            v-model.trim="nickname"
            required
            label="用户名"
            placeholder="请输入用户名"
        />
    </van-dialog>
    <!-- 密码 -->
    <van-cell title="密码" is-link value="*******" />
    <!-- 性别 -->
    <van-cell title="性别" is-link :value="userInfo.gender==1?'男': '女'" />
  </div>
</template>
<script>
import { user,user_update } from "@/api/user.js"
import  { upload }  from "@/api/common.js"
export default {
    data(){
        return {
            userInfo: {},                           // 用户信息
            id: localStorage.getItem("hm-id-71"),   // 用户id
            showNickname: false,                    // 控制昵称弹窗的显示隐藏变量
            nickname: ""                            // 昵称，用于绑定弹窗中的输入框
        }
    },
    created(){
        // 获取用户信息
        user(this.id).then(res=>{
            this.userInfo = res.data.data;
        })
    },
    methods: {
        // 显示昵称的弹窗
        showNicknameFn(){
            this.showNickname = true;
            this.nickname = this.userInfo.nickname;
        },
        // 修改昵称
        changeNicknameFn(){
            if(!this.nickname){
                this.$toast.fail("昵称不能为空！")
                return
            }
            // 修改昵称接口函数
            user_update(this.id, {
                nickname: this.nickname
            }).then(res=>{
                // console.log(61,res);
                if(res.data.message == "修改成功" ){
                    this.$toast.success(res.data.message);
                    this.userInfo.nickname = res.data.data.nickname;
                    return
                }
                this.$toast.fail(res.data.message);
            })
        },
        // 昵称弹窗关闭前会触发了一个函数
        nicknameBeforCloseFn(action,done){
            console.log(77,action);
            // 判断昵称是否为空，为空且点击的按钮为“确认”按钮则阻止关闭，否则关闭
            if(!this.nickname&&action=="confirm"){
                done(false) // 阻止关闭弹窗
            }else{
                done()      // 关闭弹窗
            }
        },
        // 选中图片后的回调函数
        after_head_img(file){
            console.log("图片选择成功：",file.file)
            // 上传图片 必须使用formData格式数据
            let fromData = new FormData();
            fromData.append("file", file.file)
            upload(fromData).then(res=>{
                let head_img = res.data.data.url;
                // 调用修改头像接口函数
                user_update(this.id, {
                    head_img: head_img
                }).then(res=>{
                    console.log(56,res);
                    // 更新浏览器上的头像
                    this.userInfo.head_img = res.data.data.head_img;
                })
            })
        }
    }
};
</script>

<style lang="less" scoped>
/deep/ .van-uploader{
    width: 100%;
    height: 100%;
    opacity: 0;
    .van-uploader__wrapper,.van-uploader__upload{
        width: 100%;
        height: 100%;
    }
}
.van-icon{
    color: #000;
}
// /deep/ 样式穿透，专门用来设置组件内部标签样式的属性
/deep/ .van-nav-bar__left{
    i{
    color: #000;
    }
}
.van-nav-bar{
    border-bottom: 2px solid #ddd;
}
.head_img{
    width: 30%;
    height: 100px;
    margin: 20px auto;
    overflow: hidden;
    position: relative;
    img{
        width: 100%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
}
</style>